import * as React from 'react';
import { get } from 'lodash';

import Test from '../Test';
import ContentEditable from 'components/common/ContentEditable';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableImageEdit = LoadableComponent(() => import('../common/EditImage'));
const LoadableAudioEdit = LoadableComponent(() => import('../common/EditAudio'));

export default class Tpl7 extends React.Component {
  renderContent = (testProps: any) => {
    const { testProfile, updateTest, fetchTestDetail } = testProps;

    return (
      <div>
        {this.renderImage(testProfile, updateTest, fetchTestDetail)}
        {this.renderAudio(testProfile, updateTest, fetchTestDetail)}
        {this.renderAudioScript(testProfile, updateTest, fetchTestDetail)}
        {this.renderAnswer(testProfile, updateTest, fetchTestDetail)}
        {this.renderWrongOptions(testProfile, updateTest, fetchTestDetail)}
      </div>
    );
  };

  renderImage(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const image = get(testProfile, 'content.image', null);
    let images = [];
    if (image) {
      images.push(image);
    }
    return (
      <div className="text-center">
        <h4 className="text-left test-parser-sub-title">图片</h4>
        <LoadableImageEdit
          showImage={true}
          selectMax={1}
          images={images}
          handleCallback={(images: any) => {
            let image = null;
            if (images.length > 0) {
              image = images[0];
            }
            let { content } = testProfile;
            content = { ...content, image };

            updateTest({ content }).then(fetchTestDetail);
          }}
        />
        <div className="clear-both" />
      </div>
    );
  }

  renderAudio(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const audio = get(testProfile, 'content.audio', null);
    return (
      <div className="text-center">
        <h4 className="text-left test-parser-sub-title">音频</h4>
        <LoadableAudioEdit
          audio={audio}
          handleCallback={(audio: any) => {
            let { content } = testProfile;
            content = { ...content, audio };

            updateTest({ content }).then(fetchTestDetail);
          }}
        />
      </div>
    );
  }

  renderAudioScript(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const sentence = get(testProfile, 'content.sentence', '');
    return (
      <div className="text-center">
        <h4 className="text-left test-parser-sub-title">音频脚本</h4>
        <ContentEditable
          tip="填写音频脚本，以@%替代正确答案(如 I @% a boy)"
          onChange={(sentence: string) => {
            let { content } = testProfile;
            content = { ...content, sentence };

            updateTest({ content }).then(fetchTestDetail);
          }}>
          {sentence}
        </ContentEditable>
      </div>
    );
  }

  renderAnswer(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const answer = get(testProfile, 'content.answer', []);
    return (
      <div className="text-center">
        <h4 className="text-left test-parser-sub-title">答案</h4>
        <ContentEditable
          tagName="select"
          tip="填写'@%'替代的答案，以逗号(,)分隔"
          onChange={(answer: any[]) => {
            let { content } = testProfile;
            content = { ...content, answer };
            updateTest({ content }).then(fetchTestDetail);
          }}>
          {answer}
        </ContentEditable>
      </div>
    );
  }

  renderWrongOptions(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const options = get(testProfile, 'content.options', []);
    return (
      <div className="text-center">
        <h4 className="text-left test-parser-sub-title">答案混淆项</h4>
        <ContentEditable
          tagName="select"
          tip="填写答案混淆项，以逗号(,)分隔"
          maxLen={11}
          onChange={(options: any[]) => {
            let { content } = testProfile;
            content = { ...content, options };
            updateTest({ content }).then(fetchTestDetail);
          }}>
          {options}
        </ContentEditable>
      </div>
    );
  }

  render() {
    return <Test {...this.props}>{this.renderContent}</Test>;
  }
}
